<template>

    <a-form ref="formRef" name="custom-validation" :model="formState" v-bind="layout" @finish="handleFinish">
        <a-row>
            <a-col :span="4">
                <a-form-item has-feedback label="商机编码" name="oppo_id">
                    <a-input allowClear v-model:value="formState.oppo_id" />
                </a-form-item>
            </a-col>

            <a-col :span="4">
                <a-form-item has-feedback label="销售人员" name="emp_id">
                    <a-select allowClear v-model:value="formState.emp_id">
                        <a-select-option :value="item.key" v-for="item in empList" :key="item.key">{{
                            item.name }}
                        </a-select-option>
                    </a-select>
                </a-form-item>
            </a-col>
            <a-col :span="4">
                <a-form-item has-feedback label="客户姓名" name="cust_id">
                    <a-select allowClear v-model:value="formState.cust_id">
                        <a-select-option :value="item.key" v-for="item in custList" :key="item.key">{{
                            item.name }}
                        </a-select-option>
                    </a-select>
                </a-form-item>
            </a-col>

            <a-col :span="4">
                <a-form-item has-feedback label="跟进阶段" name="stage">
                    <a-select allowClear v-model:value="formState.stage">
                        <a-select-option value="待接触">待接触</a-select-option>
                        <a-select-option value="初步提议">初步提议</a-select-option>
                        <a-select-option value="方案询价">方案询价</a-select-option>
                        <a-select-option value="协商议价">协商议价</a-select-option>
                        <a-select-option value="赢单">赢单</a-select-option>
                        <a-select-option value="丢失客户">丢失客户</a-select-option>
                    </a-select>
                </a-form-item>
            </a-col>

            <a-col :span="4">
                <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
                    <a-button type="primary" html-type="submit">查询</a-button>
                    <!-- <a-button type="primary" style="margin-left: 10px" @click="handleAdd">新增</a-button> -->
                </a-form-item>
            </a-col>
        </a-row>

        <a-row>
            <a-col :span="24">
                <a-flex justify="flex-end">
                    <a-button type="primary" style="margin-left: 10px" @click="handleAdd">新增</a-button>
                </a-flex>
            </a-col>
        </a-row>
    </a-form>


    <a-row>
        <a-table size="small" style="width: 100%;" :columns="columns" :data-source="data">
            <template #bodyCell="{ column, text, record }">
                <template v-if="column.dataIndex === 'name'">
                    <a>{{ text }}</a>
                </template>
                <template v-if="column.dataIndex === 'action'">
                    <a type="primary" @click="handleEdit(record)">编辑</a>
                    <a type="primary" @click="handleDelete(record)">删除</a>
                </template>
            </template>
        </a-table>
    </a-row>

    <a-row>
        <a-drawer v-model:open="open" class="custom-class" root-class-name="root-class-name" style="color: red"
            :title="addFormState.oppo_id ? '编辑' : '新增'" placement="right">
            <a-form :rules="addRulesForm" ref="addFormRef" name="custom-validation" :model="addFormState"
                v-bind="layout" @finish="addFormState.oppo_id ? handleEditFinish($event) : handleAddFinish($event)">
                <a-form-item has-feedback label="销售人员" name="emp_id">
                    <a-select v-model:value="addFormState.emp_id">
                        <a-select-option :value="item.emp_id" v-for="item in employeeList" :key="item.emp_id">{{
                            item.emp_name }}
                        </a-select-option>
                    </a-select>
                </a-form-item>

                <a-form-item has-feedback label="客户姓名" name="cust_id">
                    <a-select v-model:value="addFormState.cust_id">
                        <a-select-option :value="item.cust_id" v-for="item in customerList" :key="item.cust_id">{{
                            item.cust_name
                            }}
                        </a-select-option>
                    </a-select>
                </a-form-item>

                <a-form-item has-feedback label="接触日期" name="contact_date">
                    <a-date-picker format="YYYY-MM-DD" placeholder="请选择接触日期" value-format="YYYY-MM-DD"
                        v-model:value="addFormState.contact_date" />
                </a-form-item>

                <a-form-item has-feedback label="需求描述" name="demand_desc">
                    <a-textarea v-model:value="addFormState.demand_desc" />
                </a-form-item>

                <a-form-item has-feedback label="需求总结" name="demand_summary">
                    <a-spin :spinning="spinning" tip="AI生成中...">
                        <a-textarea v-model:value="addFormState.demand_summary" />
                        <a @click="generateSummary">AI生成</a>
                    </a-spin>

                </a-form-item>

                <a-form-item has-feedback label="跟进阶段" name="stage">
                    <a-select v-model:value="addFormState.stage">
                        <a-select-option :value="item.key" v-for="item in stageList" :key="item.key">{{ item.name }}
                        </a-select-option>
                    </a-select>
                </a-form-item>

                <a-form-item has-feedback label="丢单原因" name="lost_reason">
                    <a-textarea v-model:value="addFormState.lost_reason" />
                </a-form-item>

                <a-form-item has-feedback label="丢单备注" name="lost_notes">
                    <a-textarea v-model:value="addFormState.lost_notes" />
                </a-form-item>

                <a-form-item has-feedback>
                    <a-col :span="24">
                        <a-flex justify="flex-end">
                            <a-button type="primary" style="margin-left: 10px" html-type="submit">保存</a-button>
                        </a-flex>
                    </a-col>
                </a-form-item>
            </a-form>
        </a-drawer>
    </a-row>
</template>
<script setup>
import business_opportunityService from '@/api/modulesApi/business_opportunity';
import employeeService from '@/api/modulesApi/employee';
import { customer as customerService } from '@/api/modulesApi/customer';
import { message } from 'ant-design-vue';

const spinning = ref(false);

// 获取销售人员列表
const employeeList = ref([]);
const getEmployee = async () => {
    const res = await employeeService.getEmployee();
    employeeList.value = res.data;
};
getEmployee()


// 获取客户列表
const customerList = ref([]);
const getCustomer = async () => {
    const res = await customerService.getCustList();
    customerList.value = res.data;
};
getCustomer()


// 获取跟进阶段
const stageList = ref([]);
const getStage = async () => {
    const res = await business_opportunityService.getStage();
    stageList.value = res.data;
};
getStage()

// 获取查询项销售人员
const empList = ref([]);
const getEmp = async () => {
    const res = await business_opportunityService.getEmployee();
    empList.value = res.data;
};
getEmp()

// 获取查询项客户
const custList = ref([]);
const getCust = async () => {
    const res = await business_opportunityService.getCustomer();
    custList.value = res.data;
};
getCust()


const columns = [
    {
        title: '商机编码',
        dataIndex: 'oppo_id',
        key: 'oppo_id',
    },
    {
        title: '销售人员',
        dataIndex: 'emp_id',
        key: 'emp_id',
        customRender: ({ text, record }) => {
            return record.emp_name;
        }
    },

    {
        title: '客户姓名',
        dataIndex: 'cust_id',
        key: 'cust_id',
        customRender: ({ text, record }) => {
            return record.cust_name;
        }
    },
    {
        title: '接触日期',
        dataIndex: 'contact_date',
        key: 'contact_date',
    },
    {
        title: '需求描述',
        dataIndex: 'demand_desc',
        key: 'demand_desc',
    },
    {
        title: '需求总结',
        dataIndex: 'demand_summary',
        key: 'demand_summary',
    },
    {
        title: '跟进阶段',
        dataIndex: 'stage',
        key: 'stage',
    },
    {
        title: '创建时间',
        dataIndex: 'create_time',
        key: 'create_time',
    },
    {
        title: '丢单原因',
        dataIndex: 'lost_reason',
        key: 'lost_reason',
    },
    {
        title: '操作',
        dataIndex: 'action',
        key: 'action',
    },
];

const data = ref([]);

import { reactive, ref } from 'vue';
const formRef = ref();
const formState = reactive({
    oppo_id: '',
    emp_id: '',
    cust_id: '',
    stage: '',
});
const open = ref(false);

const addFormState = reactive({
    emp_id: '',
    cust_id: '',
    contact_date: '',
    demand_desc: '',
    stage: '',
    lost_reason: '',
    lost_notes: '',
    demand_summary: '',
});
const addFormRef = ref();

const addRulesForm = {
    emp_id: [{ required: true, message: '请选择销售人员' }],
    contact_date: [{ required: true, message: '请选择接触日期' }],
    cust_id: [{ required: true, message: '请选择客户姓名' }],
    demand_desc: [{ required: true, message: '请输入需求描述' }],
    stage: [{ required: true, message: '请选择跟进阶段' }],
};

const handleAdd = () => {
    addFormState.emp_id = '';
    addFormState.cust_id = '';
    addFormState.contact_date = '';
    addFormState.demand_desc = '';
    addFormState.stage = '';
    addFormState.lost_reason = '';
    addFormState.lost_notes = '';
    addFormState.oppo_id = '';
    addFormState.demand_summary = '';
    open.value = true;
};

const handleEditFinish = async (values) => {
    values.oppo_id = addFormState.oppo_id;
    const res = await business_opportunityService.editBusinessOpportunity(values);
    message.success('编辑成功');
    open.value = false;
    getBusinessOpportunityList();
};

const handleAddFinish = async (values) => {
    console.log(values);
    const res = await business_opportunityService.addBusinessOpportunity(values);
    message.success('添加成功');
    open.value = false;
    getBusinessOpportunityList();
};

const layout = {
    labelCol: { span: 7 },
    wrapperCol: { span: 14 },
};

const handleFinish = async () => {
    getBusinessOpportunityList();
};

const getBusinessOpportunityList = async () => {
    const res = await business_opportunityService.getBusinessOpportunityList(formState);
    data.value = res.data;
};

getBusinessOpportunityList();

const handleEdit = (record) => {
    console.log(record);
    open.value = true;
    addFormState.emp_id = record.emp_id;
    addFormState.cust_id = record.cust_id;
    addFormState.contact_date = record.contact_date;
    addFormState.demand_desc = record.demand_desc;
    addFormState.stage = record.stage;
    addFormState.lost_reason = record.lost_reason;
    addFormState.lost_notes = record.lost_notes;
    addFormState.oppo_id = record.oppo_id;
    addFormState.demand_summary = record.demand_summary;
};

const handleDelete = async (record) => {
    const res = await business_opportunityService.deleteBusinessOpportunity({
        oppo_id: record.oppo_id
    });
    message.success('删除成功');
    getBusinessOpportunityList();
};


const generateSummary = () => {
    spinning.value = true;
    business_opportunityService.generateSummary({
        demand_desc: addFormState.demand_desc
    }).then((res) => {
        addFormState.demand_summary = res.data;
    }).catch(() => {
        message.error("AI生成失败");
    }).finally(() => {
        spinning.value = false;
    })

}


</script>